<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h:head>
        <title>Projects list</title>
        <style type="text/css">
            .carItem {
                width:200px;
                height:140px;
                text-align:center;
            }
            .image-ring{
                padding: 0;
                position: relative;
            }
        </style>
    </h:head>
    <h:body>
        <f:view contracts="main">
            <ui:composition template="/template.xhtml">


                <ui:define name="content" id="mycontent">
                    <h:form>

                        <p:ring id="basic" value="#{projectsBean.listProjects()}" var="project" easing="easeInOutBack" styleClass="image-ring">  

                            <p:outputPanel style="text-align:center;width: 180px" layout="block">  
                                <p:panel header="#{project.name}" style="text-align:center">  
                                    <h:panelGrid columns="1" style="width:100%;height: 150px;padding-right: 10px;margin-right: -25px">  


                                        <h:outputText value="#{project.description}" />  
                                        <p:graphicImage value="#{projectsBean.logo}" title="image" alt="#{not empty project.name}" cache="false"  height="50" >
                                            <f:param name="projectName" value="#{project.name}"/>

                                        </p:graphicImage>
                                        <p:panelGrid columns="2" columnClasses="hoverable,hoverable" style="text-align: center;margin-left: 20%">
                                            <p:commandLink id="view" action="project?faces-redirect=true"  title="View Detail" styleClass="hoverable">  
                                            <p:graphicImage value="unfiltered/images/view1.png" width="25" height="30"/>
                                            <f:setPropertyActionListener value="#{project}"   
                                                                         target="#{projectsBean.selectedProject}" />  
                                        </p:commandLink>  
                                         <p:commandLink id="viewReport" action="reports?faces-redirect=true"  title="Tender items" styleClass="hoverable">   
                                             <p:graphicImage value="unfiltered/images/reports.png" width="25" height="30"/>
                                            <f:setPropertyActionListener value="#{project}"   
                                                                         target="#{projectsBean.selectedReportProject}" />
                                            <f:setPropertyActionListener value="#{project}"   
                                                                         target="#{reportsController.p1}" />
                                        </p:commandLink>  
                                            <p:commandLink  id="edit" oncomplete="PF('projectEditDiag').show();" styleClass="hoverable"  title="Edit Project"  update="@(.projectEditPanel)" rendered="#{login.current.department.name eq 'Admin'}">   
                                             <p:graphicImage value="unfiltered/images/edit.png" width="25" height="30"/>
                                            <f:setPropertyActionListener value="#{project}"   
                                                                         target="#{projectsBean.selectedEditProject}" />  
                                            <f:setPropertyActionListener value="#{project.name}"   
                                                                         target="#{projectsBean.oldProjectName}" /> 
                                        </p:commandLink> 
                                        <p:commandLink  id="delete" action="#{projectsBean.deleteProject()}" styleClass="hoverable"  title="Delete" update="basic" rendered="#{login.current.department.name eq 'Admin'}">   
                                             <p:graphicImage value="unfiltered/images/delete2.png" width="25" height="30"/>
                                            <f:setPropertyActionListener value="#{project}"   
                                                                         target="#{projectsBean.selectedProject}" />  
                                        </p:commandLink> 
                                            </p:panelGrid>
                                    </h:panelGrid>  
                                </p:panel>  
                            </p:outputPanel>  
                        </p:ring>  
                        <p:dialog dynamic="true" header="Create Project" hideEffect="fade" modal="true" widgetVar="projectDiag" id="diag">

                            <p:panelGrid columns="2" >
                                <p:outputLabel for="projectName" value="Project Name"/>
                                <p:inputText id="projectName" value="#{projectsBean.projectName}" required="true"/>
                                <p:outputLabel for="projectDesc" value="Project Description"/>
                                <p:inputTextarea id="projectDesc" value="#{projectsBean.projectDesc}" required="true"/>
                                <p:outputLabel for="projectLogo" value="Logo"/>
                                <p:fileUpload id="projectLogo" auto="true" dragDropSupport="true" fileUploadListener="#{projectsBean.setUploadedFile}"/>
                                
                                <f:facet name="footer">

                                    <p:commandButton update="basic" value="Create" actionListener="#{projectsBean.saveProject()}" icon="ui-icon-arrowreturnthick-1-w" oncomplete="PF('projectDiag').hide()"/>
                                </f:facet>


                            </p:panelGrid>

                        </p:dialog>
                          <p:dialog dynamic="true" header="Edit Project" hideEffect="fade" modal="true" widgetVar="projectEditDiag">
                              <p:outputPanel styleClass='projectEditPanel' >
                              <ui:include src="dialogs/editProject.xhtml"/>
                              </p:outputPanel>
                        </p:dialog>
                    </h:form>
                </ui:define>



            </ui:composition>

            <script type="text/javascript">
                function handleLoginRequest(xhr, status, args) {
                    if (args.validationFailed || !args.successful) {
                        PF('registerDiag').jq.effect("shake", {times: 5}, 100);
                    }
                    else {
                        PF('registerDiag').hide();

                    }
                }
            </script>
        </f:view>
        
    </h:body>
</html>

